import { ProForm, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  id?: number | string;
  email?: string;
} & Partial<API.CustomerUpdateEmailInputModel>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalOpen: boolean;
  values: Partial<API.CustomerUpdateEmailInputModel>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();

  const handleCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      width={640}
      styles={{
        body: {
          padding: '32px 40px 48px',
        },
      }}
      destroyOnClose
      title={intl.formatMessage({
        id: 'pages.user.list.updateForm.emailAddrss',
        defaultMessage: '邮箱地址',
      })}
      open={props.updateModalOpen}
      footer={null}
      onCancel={handleCancel}
    >
      <ProForm
        initialValues={{
          id: props.values.id,
          email: props.values.email,
        }}
        onFinish={props.onSubmit}
        submitter={false} // 禁用默认提交按钮
        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
      >
        <ProFormText name="id" hidden />
        <ProFormText
          name="email"
          label={intl.formatMessage({
            id: 'pages.user.list.updateForm.email.nameLabel',
            defaultMessage: 'Email Addrss',
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.user.list.updateForm.emailAddrss.nameRules"
                  defaultMessage="请输入邮箱地址！"
                />
              ),
            },
          ]}
          style={{ marginBottom: 24 }}
        />
        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
          <Button style={{ marginRight: 8 }} onClick={handleCancel}>
            {intl.formatMessage({
              id: 'pages.searchTable.updateForm.cancel',
              defaultMessage: '取消',
            })}
          </Button>
          <Button type="primary" htmlType="submit">
            {intl.formatMessage({
              id: 'pages.searchTable.updateForm.submit',
              defaultMessage: '提交',
            })}
          </Button>
        </div>
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;
